import {useClasses, designComponent, onMounted, reactive} from "plain-ui-composition";


export const AppNavigatorPage = designComponent({
    slots: ['default'],
    setup({slots}) {
        const state = reactive({
            mounted: false,
        })

        const classes = useClasses(() => [
            'app-navigator-page',
            {
                'app-navigator-page-mounted': state.mounted
            }
        ])

        onMounted(() => {
            setTimeout(() => {
                state.mounted = true
            }, 200)
        })

        return {
            render: () => (
                <div class={classes.value}>
                    {slots.default()}
                </div>
            )
        }
    },
})
